<template>
	<view>
		<view style="position: relative;">
			<!-- <swiper class="swiper" indicator-dots="true" autoplay="true" indicator-color="rgba(255, 255, 255, 0.3)" indicator-active-color="#FFFFFF">
				<swiper-item>
					<image src="../../static/banner_01@3x.png" style="width: 750rpx;height: 400rpx;"></image>
				</swiper-item>	
				<swiper-item>
					<image src="../../static/banner_02@3x.png" style="width: 750rpx;height: 400rpx;"></image>
				</swiper-item>
			</swiper> -->
			<uni-swiper-dot :info="info" :current="current" :mode="mode" :dotsStyles="dotsStyles">
			    <swiper class="swiper-box" @change="change" autoplay="true">
			        <swiper-item v-for="(item ,index) in info" :key="index">
			            <view class="swiper-item">
			                <!-- {{item.content}} -->
							<image :src="item.content" style="width: 750rpx;height: 400rpx;" mode="scaleToFill" @click="gotoMes(item.url)"></image>
			            </view>
			        </swiper-item>
			    </swiper>
			</uni-swiper-dot>
		</view>
		<view style="position: absolute;width: 750rpx;margin-top: -40rpx;border-radius: 40rpx 40rpx 0 0;background-color: #FFFFFF;">
			<!-- <view style="width: 690rpx;height: 64rpx;border-radius: 32rpx;background-color: #FDFCEC;margin-top: 40rpx;display: flex;margin-left: 30rpx;">
				<image src="../../static/icon@3x.png" style="height: 40rpx;width: 40rpx;margin-top: 12rpx;margin-left: 26rpx;"></image>
				<view style="font-size: 28rpx;line-height: 28rpx;margin-left: 6rpx;margin-top: 18rpx;color: #F86E21;"@click="www">今年14号台风“灿都”增强为强台风，宁波启动</view>
				<view style="width: 40rpx;height: 40rpx;line-height: 40rpx;margin-top: 8rpx;text-align: right;margin-right: 8rpx;color:#F86E21 ;">></view>
			</view> -->
			<view >
				<uni-notice-bar scrollable="true" showIcon="true" single="true" :showGetMore="true"  speed="10" :text=weather showGetMore=false></uni-notice-bar>
			</view>
			
			<view style="display: flex;justify-content: space-between;padding: 0 32rpx;">
				<view style="font-size: 40rpx;line-height: 40rp;margin-top: 40rpx;font-weight:500">码上汛查</view>
				<view style="font-size: 32rpx;line-height: 48rpx;margin-top: 48rpx;font-weight:500">{{userName}}</view>
			</view>
			<view style="display: flex;">
				<view style="width: 280rpx;height: 360rpx;background-color: #E5F4FF;margin-left: 32rpx;margin-top: 30rpx;border-radius: 16rpx;" @click="gotoFX()">
					<view style="color: #1372F5;font-size: 36rpx;line-height: 36rpx;margin-top: 40rpx;margin-left: 28rpx;font-weight:500">防汛检查</view>
					<view style="color: #1372F5;font-size: 26rpx;line-height: 26rpx;margin-top: 20rpx;margin-left: 28rpx;">汛期检查早知道</view>
					<image src="../../static/pic_01@3x.png" style="140rpx;height: 266rpx;width: 280rpx;margin-top: -28rpx;"></image>
				</view>
				<view>
					<view style="width: 384rpx;height: 170rpx;margin-top: 30rpx;margin-left: 20rpx;background-color: #FFF7EB;border-radius: 16rpx;display: flex;" @click="goto1">
						<view>
							<view style="color: #F86E21;font-size: 36rpx;line-height: 36rpx;margin-top: 40rpx;margin-left: 30rpx;position: absolute;font-weight:500">避灾场所排查</view>
							<view style="color: #F86E21;font-size: 26rpx;line-height: 26rpx;margin-top: 96rpx;margin-left: 30rpx;position:absolute">避灾场所安全巡查</view>
						</view>
						<image src="../../static/pic_02@3x.png" style="width: 166rpx;height: 134rpx;margin-top: 36rpx;margin-left: 222rpx;"></image>
					</view>
					<view style="width: 384rpx;height: 170rpx;margin-top: 20rpx;margin-left: 20rpx;background-color: #FFECF2;border-radius: 16rpx;display: flex;" @click="goto">
						<view>
							<view style="color: #E93B3D;font-size: 36rpx;line-height: 36rpx;margin-top: 40rpx;margin-left: 30rpx;position: absolute;font-weight:500">一键避灾</view>
							<view style="color: #E93B3D;font-size: 26rpx;line-height: 26rpx;margin-top: 96rpx;margin-left: 30rpx;position:absolute">一键导航避灾场所</view>
						</view>
						<image src="../../static/pic_03@3x.png" style="width: 166rpx;height: 134rpx;margin-top: 36rpx;margin-left: 222rpx;"></image>
					</view>
				</view>
			</view>
			<view style="font-size: 40rpx;line-height: 40rpx;margin-top: 80rpx;margin-left: 30rpx;font-weight:500">防汛资讯</view>
			<view style="padding-bottom: 4rpx;">
				<!-- <view style="display: flex;width: 690rp;height: 132rpx;margin-top: 40rpx;margin-left: 30rpx;border-bottom: 1rpx solid #E5E5E5;" v-for="(item,index) in message" :key=index v-if="index<10" @click="gotoMes(item.url)"> 
					<view>
						<view style="font-size: 32rpx;line-height: 32rpx;">
							<text style="max-width: 476rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display: block;">{{item.content}}</text>
						</view>
						<view style="display: flex;">
							<view style="color: #999999;font-size: 24rpx;line-height: 24rpx;margin-top: 30rpx;">{{item.regionName}}{{item.departmentName}}</view>
							<view style="color: #999999;font-size: 24rpx;line-height: 24rpx;margin: 30rpx 30rpx;">{{item.createTime}}</view>
						</view>
					</view>
					<image :src="item.cover" style="width: 170rpx;height: 114rpx;position: absolute;right: 30rpx;"></image>
				</view> -->
				<view style="display: flex;width: 690rp;height: 132rpx;margin-top: 40rpx;margin-left: 30rpx;border-bottom: 1rpx solid #E5E5E5;" @click="gotoMes1()">
					<view>
						<view style="font-size: 32rpx;line-height: 32rpx;">
							<text style="max-width: 476rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display: block;">“汛”序渐进，防患未然——市防指办检查组来鄞开展汛前检查工作</text>
						</view>
						<view style="display: flex;">
							<view style="color: #999999;font-size: 24rpx;line-height: 24rpx;margin-top: 30rpx;">鄞州应急管理  </view>
							<view style="color: #999999;font-size: 24rpx;line-height: 24rpx;margin: 30rpx 30rpx;">2022-03-17 12:00</view>
						</view>
					</view>
					<image src="../../static/picFirst@2x.png" style="width: 170rpx;height: 114rpx;position: absolute;right: 30rpx;"></image>
				</view>
				<view style="display: flex;width: 690rp;height: 132rpx;margin-top: 40rpx;margin-left: 30rpx;border-bottom: 1rpx solid #E5E5E5;" @click="gotoMes2()">
					<view>
						<view style="font-size: 32rpx;line-height: 32rpx;">
							<text style="max-width: 476rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display: block;">鄞州区开展防汛防台工作培训会议 努力推动辖区防汛防台整体建设迈上新台阶</text>
						</view>
						<view style="display: flex;">
							<view style="color: #999999;font-size: 24rpx;line-height: 24rpx;margin-top: 30rpx;">鄞州应急管理  </view>
							<view style="color: #999999;font-size: 24rpx;line-height: 24rpx;margin: 30rpx 30rpx;">2022-03-15 17:24</view>
						</view>
					</view>
					<image src="../../static/picSecond@2x.png" style="width: 170rpx;height: 114rpx;position: absolute;right: 30rpx;"></image>
				</view>
			</view>
		</view>
		<!-- <view style="display: flex;position: fixed;bottom: 0rpx;height: 100rpx;background-color: #FFFFFF;width: 750rpx;border-top:1rpx solid #E5E5E5;">
			<view style="margin-left: 142rpx;" v-if="icon" @click="icon1()">
				<image src="../../static/icon_press@3x.png" style="height: 52rpx;width: 52rpx;margin-top: 10rpx;"></image>
				<view style="font-size: 22rpx;line-height: 22rpx;margin-top: -6rpx;color: #388CFE;text-align: center;">首页</view>
			</view>	
			<view style="margin-left: 142rpx;" v-else @click="icon1()">
				<image src="../../static/icon1@3x.png" style="height: 52rpx;width: 52rpx;margin-top: 10rpx;"></image>
				<view style="font-size: 22rpx;line-height: 22rpx;margin-top: -6rpx;color:#A4AAB3 ;text-align: center;">首页</view>
			</view>	
			<view style="margin-left: 376rpx;"@click="icon2()" v-if="icon">
				<image src="../../static/icon_my@3x.png" style="height: 52rpx;width: 52rpx;margin-top: 10rpx;"></image>
				<view style="font-size: 22rpx;line-height: 22rpx;margin-top: -6rpx;color: #A4AAB3;text-align: center;">我的</view>
			</view>	
			<view style="margin-left: 376rpx;"@click="icon2()" v-else>
				<image src="../../static/icon%20_press_my@3x.png" style="height: 52rpx;width: 52rpx;margin-top: 10rpx;"></image>
				<view style="font-size: 22rpx;line-height: 22rpx;margin-top: -6rpx;color: #388CFE;text-align: center;">我的</view>
			</view>	
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				icon:true,
				 info: [{
				            content: './../../static/banner_01@3x.png',
							url:'https://mp.weixin.qq.com/s/iB0qQohb-3UG9s7aD0SJdA'
				        }, {
							content: './../../static/banner_02@3x.png',
							url:'https://mp.weixin.qq.com/s/GMvPqYnUzb3CDPkQd778TA'
						}],
				mode: 'round',
				current:0,
				dotsStyles:{
					bottom:30,
					backgroundColor:'rgba(255, 255, 255, 1)',
					selectedBackgroundColor:'#fff',
					selectedBorder:'1rpx #fff solid',
					border:'1rpx #fff solid',
					height:5,
					width:5
				},
				message:[],
				areaId:'',
				weather:'',
				userName:''
			}
		},
		methods: {
			change(e) {
			            this.current = e.detail.current;
			},
			www(){
				uni.navigateTo({
					url:'./weather'
				})
			},
			icon1(){
				this.icon=true
			},
			icon2(){
				this.icon=false
				uni.navigateTo({
					url:'mine'
				})
			},
			goto(){
				uni.navigateTo({
					url:'../index/index'
				})
			},
			goto1(){
				uni.navigateTo({
					url:'../list/list'
				})
			},
			gotoFX(){
				if(this.areaId=='330212'){
					uni.navigateTo({
						url:`../FXducha/duchaList`
					})
				}
				else{
					uni.navigateTo({
						url:`../FXducha/jiadaoZC`
					})
				}
			},
			async getMessage(){
				this.$myRequest({
					url:'/project_flood/v1/check_video/list',
				}).then((res)=>{
					this.message=res.data.data;
					console.log(this.message);
				})
			},
			gotoMes(url){
				uni.navigateTo({
					url:'./message?link='+url
				})
			},
			gotoMes1(){
				uni.navigateTo({
					url:'./message?link='+'https://mp.weixin.qq.com/s/JFBMqQ_6ES_d5xwjdvCTAA'
				})
			},
			gotoMes2(){
				uni.navigateTo({
					url:'./message?link='+'https://mp.weixin.qq.com/s/0smLBKP8RgrILBkADLOjdQ'
				})
			},
			async getNme(){
				this.$myRequest({
					url:'/project_flood/v1/public/weather',
					
				}).then((res)=>{
					console.log(res.data.data.weather);
					this.weather=res.data.data.weather
				})
			},
		},
		onLoad() {
			try {
			    const X = uni.getStorageSync('areaId');
				this.areaId=X;
			    if (X) {
			        // console.log(X);
			    }
			} catch (e) {
			    // error
			}
			try {
			    const Y = uni.getStorageSync('userName');
				this.userName=Y;
			    if (Y) {
			        // console.log(Y);
			    }
			} catch (e) {
			    // error
			}
			if(this.areaId=='330212'){
				this.userName='鄞州区'
			}
			
			
		},
		onShow() {
			uni.showLoading({
			    title: '加载中'
			});
			this.getNme()
			this.getMessage().then((res)=>{
				uni.hideLoading();
			})
			
		},
	}
</script>

<style>
.swiper-box{
	height: 400rpx;
	width: 750rpx;
}
.dotsStyles{
	bottom: 100rpx;
}
.uni-noticebar{
	width: 690rpx !important;
	border-radius: 32rpx;
	height: 64rpx;
	margin-top: 40rpx;
	margin-left: 30rpx;
}
</style>
